<!DOCTYPE html>
<html>
<head>
	<title>css-bootstrap</title>
	<meta charset="utf-8">
	<meta name='viewport' content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

	<style type="text/css">
		div ul {
			width: 100%;
			background-color: gray;
			/*border: 1px solid red;*/
			height: 30px;
			text-align: center;
		}

		div li{
			display: inline;
		}

		div li a{
			text-decoration: none;
			color: white;
			font-size: 14px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="jumbotron">
			<h1>My first bootstrap page</h1>
			<p>
				<p>Resize this responsive page to see the effect!</p>
			</p>
		</div>

		<div class="row">
			<div class="col-xs-4">
				<h3>Column 1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
			</div>
			<div class="col-xs-4">
				<h3>Column 1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
			</div>
			<div class="col-xs-4">
				<h3>Column 1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
			</div>
		</div>
	</div>
<!-- 	<div class="my-footer ">
		<ul>
			<li><a href="#">Courses</a> </li>
			<li><a href="#">Courses</a> </li>
			<li><a href="#">Courses</a> </li>
			<li><a href="#">Courses</a> </li>
			<li><a href="#">Courses</a> </li>
			<li><a href="#">Courses</a> </li>
		</ul>
	</div>		 -->
	<div>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About</a></li>
		</ul>
	</div>

</body>
</html>